import React, {useState} from 'react';
import {StyleSheet, View, Text, Image,TouchableWithoutFeedback} from 'react-native';
import {scaleSizeW, scaleSizeH, setSpText} from '../utils/ScreenUtil';
import {url} from '../services'
import TouchButton from './TouchButton';

export default props => {
  console.log('props',props);
  const {
    film: {
      films: {_id,name, images, director, actor},
      // films: {_id,name, images},
      count
      
    },
    isHot,
    navigation
  } = props;
  const actors = actor.join(' / ');
  let peopleCount = count;
  if (peopleCount >= 10000) {
    peopleCount = (peopleCount / 10000).toFixed(2) + '万';
  }
  if (isHot) {
    peopleCount += '人看过';
  } else {
    peopleCount += '人想看';
  }
  function handlePress(){
    // navigation.navigate('Detail',{id:_id})
  }
  return (
    <TouchableWithoutFeedback onPress={handlePress}>
    <View style={styles.container} >
      
      <Image
        source={{uri: url + '/images/' + images[0]}}
        style={{width: scaleSizeW(169), height: scaleSizeH(235)}}></Image>
      <View style={styles.info}>
        <Text style={{fontSize: setSpText(32)}}>{name}</Text>
        <Text style={styles.directText}>导演：{director}</Text>
        <Text style={styles.directText}>主演: {actors}</Text>
      </View>
      <View style={styles.button}>
        <Text style={{textAlign:"center"}}>{peopleCount}</Text>
        <TouchButton
          buttonStyle={styles.buyButton}
          textStyle={styles.buyText}
          >
          购买
        </TouchButton>
      </View>
    </View>
    </TouchableWithoutFeedback>
  );
};
const styles = StyleSheet.create({
  container: {
    // flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: scaleSizeW(30),
    paddingRight: scaleSizeW(30),
    borderBottomColor: '#efefef',
    borderBottomWidth: scaleSizeW(2),
    height: scaleSizeH(295),
  },
  info: {
    flexDirection: 'column',
    justifyContent: 'flex-start',
    width: scaleSizeW(315),
    marginLeft: scaleSizeW(32),
    marginTop: scaleSizeW(50),
    height: '100%',
  },
  directText: {
    fontSize: setSpText(20),
    color: '#a9a9a9',
  },
  button: {
    marginRight: scaleSizeW(0),
  },
  buyButton: {
    width: scaleSizeW(124),
    height: scaleSizeH(62),
    borderColor: '#fb5e62',
    borderWidth: scaleSizeW(1),
    backgroundColor: 'rgba(0,0,0,0)',
  },
  buyText: {
    color: '#fb5e6e',
  },
  line: {
    borderBottomColor: '#efefef',
    borderBottomWidth: scaleSizeW(2),
    borderStyle: 'solid',
    width: scaleSizeW(750),
    height: scaleSizeW(2),
  },
});
